<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/index.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body class="iframe">
    <div class="row-box search-panel person-type-show">
        <div class="layui-row layui-col-space20">
            <!--背景审查工作流程图-->
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header table-title">
                        <span>
                            常用查询
                        </span>
                        <div class="search-advance">
                            高级搜索
                            <i class="layui-icon layui-icon-down"></i>
                            <i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="layui-card-body search-body">
                        <form class="layui-form" action="" lay-filter="searchForm">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" autocomplete="off" class="layui-input" placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">身份证号码</label>
                                    <div class="layui-input-inline">
                                        <select name="idCard" placeholder="请输入" lay-search="">
                                            <option value="">请输入身份证号码</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline person-type-switch">
                                    <label class="layui-form-label">人员类型 </label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="personType" value="1" lay-filter="personType" title="有疑点" checked>
                                        <input type="radio" name="personType" value="2" lay-filter="personType" title="无疑点">
                                    </div>
                                </div>
                                <div class="layui-inline person-type-block">
                                    <label class="layui-form-label">疑点类型</label>
                                    <div class="layui-input-block">
                                        <input lay-filter="doubtTypes" type="checkbox" name="name1" lay-skin="primary" title="上访重点人员" checked="checked">
                                        <input lay-filter="doubtTypes" type="checkbox" name="name2" lay-skin="primary" title="在逃人员">
                                        <input lay-filter="doubtTypes" type="checkbox" name="name3" lay-skin="primary" title="有过吸毒贩毒人员">
                                    </div>
                                </div>
                                <div class="layui-inline search-btns">
                                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button class="layui-btn layui-btn-warm" lay-submit="" lay-filter="clear">
                                        <i class="layui-icon layui-icon-delete"></i>
                                        清空
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space20 detail-table">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header table-title">
                        <span>数据列表</span>
                        <div class="gen-btn">
                            <button class="layui-btn layui-btn-normal" onclick="_ft.genReport()">
                                <i class="layui-icon layui-icon-release"></i>
                                生成核查报告
                            </button>
                        </div>
                    </div>
                    <div class="layui-card-body x-table-box">
                        <table class="layui-table" id="myTable" lay-filter="tableBody">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="tableOper">
        <a class="layui-btn layui-btn-normal btn-text" lay-event="edit">
            <i class="layui-icon">&#xe642;</i>
            编辑</a>
        <a class="layui-btn layui-btn-normal btn-text" lay-event="del">
                <i class="layui-icon">&#xe640;</i>
            删除</a>
      </script>
    <script type="text/html" id="personStatus">
         {{# 
            var statusMap={
                1: {class: "layui-bg-red", text: "发现疑点"},
                2: {class: "layui-bg-blue", text: "正常" }
            }
        }}
         <span class="status {{=statusMap[d.status].class}}">{{=statusMap[d.status].text}}</span>

      </script>
    <script src="../../lib/jquery-1.9.1.min.js"></script>
    <script src="../../lib/layui/layui.all.js"></script>
    <script>
        (function () {
            var table = layui.table;
            var form = layui.form;
            var $searchBodyElem = $('.search-panel'); // 搜索条件框
            var advanceBtn = $('.search-advance'); // 高级按钮
            var pageData = {
                personType: 1, // 1 有疑点,2 无疑点
                doubtTypes: [] // 疑点数组
            };
            var query = {};
            form.on('submit(search)', function (data) {
                console.log(data)
                // 搜索请求数据
                query = {
                    name: data.field.name,
                    personType: data.field.personType
                };
                return false;
            })
            form.on('submit(clear)', function (data) {
                console.log(data)
                // 搜索请求数据
               form.val('searchForm', {
               name1: '',
               name2: '',
               name3: ''
               })
                return false;
            })
            // 设置页面交互事件
            advanceBtn.on('click', function () {
                $searchBodyElem.toggleClass('open')
            })
            form.on('radio(personType)', function (data) {
                // 设置人员类型
                pageData.personType = data.value;
                if (data.value == 1) {
                    $searchBodyElem.addClass('person-type-show');
                } else {
                    $searchBodyElem.removeClass('person-type-show');
                }
            })
            form.on('checkbox(doubtTypes)', function (data) {
                var doubtTypes = [];
                $('.person-type-block input').each(function (index, elem) {
                    let checked = $(elem).prop('checked');
                    if (checked) {
                        doubtTypes.push(elem.name);
                    }
                })
                pageData.doubtTypes = doubtTypes;
            })
            //监听工具条
            table.on('tool(tableBody)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    layer.msg('编辑数据')
                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        , title: 'xxx'
                    });
                }
            });
            var mockData = [
                {
                    username: '张三', idcard: '44015645312231321', region: '汉族',
                    sex: '男', org: '东城区', createTime: '2018-7-11 12:00:00', status: 1, doubts: '姓名和证件号不一致,姓名和证件号不一致'
                },
                {
                    username: '张三', idcard: '44015645312231321', region: '汉族',
                    sex: '男', org: '东城区', createTime: '2018-7-11 12:00:00', status: 2, doubts: '姓名和证件号不一致,姓名和证件号不一致'
                },
                {
                    username: '张三', idcard: '44015645312231321', region: '汉族',
                    sex: '男', org: '东城区', createTime: '2018-7-11 12:00:00', status: 1, doubts: '姓名和证件号不一致,姓名和证件号不一致'
                },
                {
                    username: '张三', idcard: '44015645312231321', region: '汉族',
                    sex: '男', org: '东城区', createTime: '2018-7-11 12:00:00', status: 1, doubts: '姓名和证件号不一致,姓名和证件号不一致'
                },
                {
                    username: '张三', idcard: '44015645312231321', region: '汉族',
                    sex: '男', org: '东城区', createTime: '2018-7-11 12:00:00', status: 2, doubts: '姓名和证件号不一致,姓名和证件号不一致'
                }
            ];
            var _ft = {
                init: function () {
                    this.renderTable(mockData);
                },
                genReport: function () {
                    // 生成核查报告
                    // $.post()
                },
                renderTable: function (data) {
                    table.render({
                        done: function (res, curr, count) {
                            var doubts = res.rows.map(function (item, index) {
                                return item.doubts.split(',')
                            })
                            doubts.forEach(function (item, index) {
                                let tips = [];
                                item.forEach(function (item2, index) {
                                    tips.push('<span class="tips"><span class="lab">发现疑点</span><span class="txt">' + item2 + '</span></span>')
                                })
                                let tr = '<tr><td colspan="8" class="tips-con">' + tips.join('') + '</td><td></td></tr>'
                                $('.layui-table tr[data-index="' + index + '"]').after(tr);
                            })
                        },
                        elem: '#myTable',
                        height: 500,
                        data: data,
                        cols: [[ //表头
                            { type: 'checkbox' }
                            , { field: 'username', title: '姓名', width: 80 }
                            , { field: 'idcard', title: '身份证号码', minWidth: 100 }
                            , { field: 'region', title: '民族', width: 80 }
                            , { field: 'sex', title: '性别', width: 80 }
                            , { field: 'org', title: '所在单位', minWidth: 120 }
                            , { field: 'createTime', title: '录入时间', width: 177 }
                            , { field: 'status', title: '人员状态', templet: '#personStatus', unresize: true, width: 177 }
                            , { title: '操作', width: 178, align: 'center', toolbar: '#tableOper' }
                        ]],
                        limit: 10
                        , request: {
                            pageName: 'curr',
                            limitName: 'nums'
                        }
                        , response: {
                            statusName: 'success',
                            statusCode: 200,
                            msgName: 'hint',
                            countName: 'total',
                            dataName: 'rows'
                        }
                        , method: 'get'
                        , where: query
                        // ,url: '/demo/table/user/' // 异步操作数据接口
                        , page: { //开启分页
                            theme: 'table',
                            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
                            prev: '上一页',
                            next: '下一页'
                        }
                    })
                }
            };
            _ft.init();
            window._ft = _ft;
        })()
    </script>
</body>

</html>